<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card" v-if="crud.optPageShow.listPage">
        <div slot="header" class="clearfix">
          <span>标签列表</span>
        </div>
        <!--工具栏-->
        <div class="head-container">
          <crudOperation :permission="permission"/>
        </div>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;"
                  @select="crud.selectChange"
                  @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler"
                  @filter-change="crud.handleFilterChange"
                  :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border stripe>
          <el-table-column :selectable="checkboxT" type="selection"/>
          <el-table-column v-if="columns.visible('labelCode')" :show-overflow-tooltip="true" prop="labelCode"
                           label="标签编码"/>
          <el-table-column v-if="columns.visible('labelName')" :show-overflow-tooltip="true" prop="labelName"
                           label="标签名称"/>
          <el-table-column v-if="columns.visible('labelType')" :show-overflow-tooltip="true" prop="labelType"
                           label="标签类型" key="labelType"
                           :filters="labelTypeList"
                           filter-placement="bottom-end" :filter-multiple="false"
                           column-key="labelType">
            <template slot-scope="scope">
              {{ formatterType(scope.row.labelType) }}
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('labelLevel')" :show-overflow-tooltip="true" prop="labelLevel"
                           :filters="[{ text: '系统级', value: '1' }, { text: '平台级', value: '2' }]"
                           filter-placement="bottom-end" :filter-multiple="false" column-key="labelLevel"
                           label="标签级别">
            <template slot-scope="scope">
              <span>{{ scope.row.labelLevel == '1' ? '系统级' : '平台级' }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('labelStatus')" :show-overflow-tooltip="true" key="labelStatus"
                           prop="labelStatus" label="标签状态"
                           :filters="[{ text: '启用', value: 'ENABLE' }, { text: '停用', value: 'DISABLE' }]"
                           filter-placement="bottom-end" :filter-multiple="false"
                           column-key="labelStatus">
            <template slot-scope="scope">
              <el-tag size="small" v-if="scope.row.labelStatus=='ENABLE'" align="center" type="success"
                      style="width:60px;">启用
              </el-tag>
              <el-tag size="small" v-if="scope.row.labelStatus=='DISABLE'" align="center" type="warning"
                      style="width:60px;">停用
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('appName')" :show-overflow-tooltip="true" prop="appName" label="所属应用"/>
          <el-table-column v-if="columns.visible('upUser')" :show-overflow-tooltip="true" prop="upUser" label="更新人"/>
          <el-table-column v-if="columns.visible('upTs')" :show-overflow-tooltip="true" prop="upTs" label="更新时间">
            <template slot-scope="scope">
              <div>
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.upTs }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card class="box-card" v-if="crud.status.add > 0 || crud.status.edit>0">
        <div slot="header" class="clearfix el-page-header">
          <div class="el-page-header__left" @click="crud.goBack">
            <i class="el-icon-back"></i>
            <div class="el-page-header__title">返回</div>
          </div>
          <div class="el-page-header__content">{{ crud.status.title }}</div>
        </div>
        <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="240px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="标签编码" prop="labelCode">
                <el-input v-model.trim="form.labelCode" :disabled="crud.status.edit>0"/>
              </el-form-item>
            </el-col>
            <el-col :span="9" class="data_from_el-col">
              <div class="hex-form-inf">
                <div class="hex-form-inf-content">
                  标签编码
                </div>
                <i class="el-icon-info hex-form-inf-icon" @click="crud.onOperInf($event)" data-status="off"></i>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="标签名称" prop="labelName">
                <el-input v-model.trim="form.labelName"/>
              </el-form-item>
            </el-col>
            <el-col :span="9" class="data_from_el-col">
              <div class="hex-form-inf">
                <div class="hex-form-inf-content">
                  标签名称
                </div>
                <i class="el-icon-info hex-form-inf-icon" @click="crud.onOperInf($event)" data-status="off"></i>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="标签级别" prop="labelLevel">
                <el-select v-model="form.labelLevel" filterable placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in conTypeList" :key="item.value" :label="item.name" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="9" class="data_from_el-col">
              <div class="hex-form-inf">
                <div class="hex-form-inf-content">
                  标签级别
                </div>
                <i class="el-icon-info hex-form-inf-icon" @click="crud.onOperInf($event)" data-status="off"></i>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="标签类型" prop="labelType">
                <el-select v-model="form.labelType" filterable placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in dict.label_type" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="9" class="data_from_el-col">
              <div class="hex-form-inf">
                <div class="hex-form-inf-content">
                  标签类型
                </div>
                <i class="el-icon-info hex-form-inf-icon" @click="crud.onOperInf($event)" data-status="off"></i>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否启用" prop="labelStatus">
                <el-radio v-model="form.labelStatus" label="ENABLE">启用</el-radio>
                <el-radio v-model="form.labelStatus" label="DISABLE">停用</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="9" class="data_from_el-col">
              <div class="hex-form-inf">
                <div class="hex-form-inf-content">
                  是否启用
                </div>
                <i class="el-icon-info hex-form-inf-icon" @click="crud.onOperInf($event)" data-status="off"></i>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-operator-button">
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
          <el-button @click="crud.goBack">返回</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/label/CRUD.operation.vue'
import labelInfoApi from "@/api/label/labelInfo";

const queryList = [
  {
    'cloumValue': 'labelCodeFuzzy',
    'cloumName': '标签编码'
  },
  {
    'cloumValue': 'labelName',
    'cloumName': '标签名称'
  }
];

const defaultCrud = CRUD({
  title: '标签',
  queryList: queryList,
  url: '/api/labelInfo',
  sort: 'sort,asc',
  crudMethod: {...labelInfoApi}
})

const defaultForm = {
  pkId: null,
  labelCode: null,
  labelName: null,
  labelLevel: '1',
  labelType: '1',
  labelStatus: 'ENABLE',
}

export default {
  name: 'labelInfo',
  components: {crudOperation},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['label_type'],
  data() {
    var validateLabelCode = (rule, value, callback) => {
      const reg = /^[a-zA-Z][a-zA-Z0-9_]*$/
      if (value === undefined || value === null || value === '') {
        callback(new Error('标签编码不允许为空'))
      } else if (!reg.test(value) && value !== '') {
        callback(new Error('只能输入字母数字下划线，且以字母开头'))
      } else if (this.crud.form.pkId === null) {
        let params = {labelCode: value, pkId: this.form.pkId}
        labelInfoApi.checkLabelCode(params).then(res => {
          if (res) {
            callback(new Error('该标签编码已存在'))
          } else {
            callback()
          }
        })
      } else {
        callback()
      }
    }
    return {
      currentAppInfo: null,
      rules: {
        labelCode: [
          {required: true, message: '请输入标签编码', trigger: 'blur'},
          {required: true, validator: validateLabelCode, trigger: "blur"}
        ],
        labelName: [
          {required: true, message: '请输入标签名称', trigger: 'blur'}
        ],
        labelLevel: [
          {required: true, message: '请选择标签级别', trigger: 'change'}
        ],
        labelType: [
          {required: true, message: '请选择标签类型', trigger: 'change'}
        ],
        labelStatus: [
          {required: true, message: '请选择标签状态', trigger: 'change'}
        ],
      },
      conTypeList: [
        {value: '1', name: '系统级'},
        {value: '2', name: '平台级'}
      ],
      permission: {
        add: ['label:add'],
        edit: ['label:edit'],
        del: ['label:del'],
        enable: ['label:enable'],
        disable: ['label:disable'],
      },
      labelType: [],
      labelTypeList: [],
    }
  },
  created() {
    this.currentAppInfo = JSON.parse(localStorage.getItem('appInfo'))
    this.labelType = this.dict.label_type;
  },
  watch: {
    labelType() {
      this.$nextTick(() => {
        this.labelType.forEach(item => {
          var obj = {
            text: item.label,
            value: item.value
          }
          this.labelTypeList.push(obj)
        })
      })
    },
  },
  methods: {
    checkboxT(row, rowIndex){
       return row.appCode === this.currentAppInfo.appCode
    },
    formatterType(val) {
      return this.dict.label.label_type[val]
    },
  }
}
</script>
<style scoped lang="scss">
.el-select {
  width: 100%;
}

.leftStep {
  height: 350px;
  padding: 0px 20px 60px 20px;
}

.setpsbgright {
  padding: 30px;
  border-left: 1px solid #ebeef5;
  min-height: 360px;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
  color: #347de1;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
  z-index: 999;
}
</style>
